<template>
  <view class="category">
    <!-- 搜索框 -->
    <ugo-search></ugo-search>
    <view class="section">
     <view class="menu">
       <!-- 点击高亮判断 -->
      <view :class="['menu-group',current === index?'active':'']" v-for="(item,index) in menus" :key="index" @click="menuSelect(index)">{{item}}</view>
     </view>
     <view class="content">
       <view class="goods-group" v-for="item1 in goods" :key="item1.cat_id">
         <!-- 标题 -->
         <view class="goods-title">{{item1.cat_name}}</view>
         <!-- 列表商品 -->
         <view class="goods-list">
           <navigator v-for="item2 in item1.children" :key="item2.cat_id" :url="'/pages/goods_list/goods_list?id='+item2.cat_id">
            <!-- 图片 -->
            <u-image width="120rpx" height="120rpx" :src="item2.cat_icon"></u-image>
            <!-- 图片下的文字 -->
            <view class="font-title">{{item2.cat_name}}</view>
           </navigator>
         </view>
       </view>
     </view>
    </view>
  </view>
</template>

<script>
// 1.建议data中定义过的变量，一定要在模板中渲染使用过
// 2.优化代码
    // 1.把categories 提取出去，当作是一个很普通的全局变量即可（data中变量，1.也是全局变量，2.一定要渲染到页面上 
// 3.在uniapp中定义全局变量有两种方式
    // 1.直接在data中来定义，确保这个全局变量要在页面中使用到
    // 2.如果没有使用到data中变量，建议把变量提取到onLoad中来定义
    
export default {
  data(){
    return{
      // categories:[],
      // 点击菜单的下标
      current:0,
      menus:[],
      goods:[]
    }
  },
  // 页面用小程序的生命周期
  onLoad(){

    // 小程序中缓存类似于网页本地存储
    // 小程序的缓存，代码的写法比网页简单，支持任意格式，不用转json

    // 获取缓存数据
    const storege = uni.getStorageSync('categories')
    // 判断是否有缓存
    if(storege){
      console.log('有缓存');
          // 判断时间是否过期
          if(Date.now() - storege.time > 1000 * 10){
            // 过期了就重新获取数据
            console.log("过期了");
            this.getCategories()
          }else{
            console.log('没过期，获取缓存数据');
            // 没过期，就回去缓存数据
            this.categories = storege.data
            this.menus = this.categories.map(item =>item.cat_name)
            this.goods = this.categories[this.current]?this.categories[this.current].children:[]
          }
    }else{
      // 没缓存，就发请求获取数据
      this.getCategories()
      console.log('没缓存');
    }


    this.categories=[]
    this.getCategories()
  },
  // 分享给好友
  onShareAppMessage(){
    console.log(onShareAppMessage);
  },
  // 分享到朋友圈
  onShareTimeline(){
    console.log(onShareTimeline);
  },
  // 计算属性
  computed:{
    // // 获取menu名字左侧菜单
    // menus(){
    //   return this.categories.map(item =>item.cat_name)
    // },
    // //  右侧商品
    // goods(){
    //   return this.categories[this.current]?this.categories[this.current].children:[]
    // }
  },
  methods:{
    // 获取菜单数据
    async getCategories(){
      const res = await this.$u.get('/categories')
      console.log(res);
      this.categories = res.message


      // 在获取到数据后存入数据（存数据和时间戳）
      uni.setStorageSync('categories',{data:this.categories,time: Date.now()})

      this.menus = this.categories.map(item =>item.cat_name)
      this.goods = this.categories[this.current]?this.categories[this.current].children:[]
    },
    // 左侧菜单高亮
    menuSelect(current){
      this.current = current
       this.goods = this.categories[this.current]?this.categories[this.current].children:[]
    }
  }

}
</script>

<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.category{
  height: 100vh;
  display: flex;
  flex-direction: column;
  
}
.section{
  flex: 1;
  // background-color: red;
  display: flex;
  overflow: hidden;
}
.menu{
width: 182rpx;
overflow: auto;
// background-color: blue;
.menu-group{
  height: 74rpx;
  display: flex;
  // justify-self: center;
  justify-content: center;
  align-items: center;
  background-color: #f3f3f3;
}
.active{
  background-color: $themeColor;
}
}

.content{
  flex: 1;
  overflow: auto;
  // background-color: green;
  .goods-group{
    .goods-title{
    height: 74rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
      
    }
    .goods-list{
      display: flex;
      flex-wrap: wrap;
      navigator{
        width: 33.33%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 15rpx 0;
        .font-title{
          margin-top: 10rpx;
        }
      }
        
      }
  }
}
</style>